<template>
	<view class="content">
		<view class="title_txt"><text class="txt_b">抢单详情</text></view>
		<view class="infobox">
			<view class="timer">
				<view class="left_txt">商家：<text>{{infoData.usdt_address}}</text></view>
				<view class="time_box">{{infoData.time}}</view>
			</view>
			<view class="moneybox">
				<view class="money_d">
					<text class="danjia">USDT单价</text>
					<text class="number"><text>¥</text>{{infoData.usdt_price}}</text>
					<view class="jingdu">完成进度</view>
					<view class="progressbox">
						<view class="progress">
							<u-line-progress :percentage="infoData.money_bili" :showText="false" height="4" activeColor="#f28a65"></u-line-progress>
						</view>
						<text>55.35%</text>
					</view>
				</view>
				<view class="money_z">
					<view class="money_z_t">
						<view class="z_t_left">
							<text class="txt_l">任务总金额</text>
							<text class="number_l">{{infoData.all_money}}USDT</text>
						</view>
						<view class="z_t_right">
							<text class="txt_l">结算时间</text>
							<text class="number_l">{{infoData.time_low}}-{{infoData.time_high}}小时</text>
						</view>
					</view>
					<view class="money_z_t">
						<view class="z_t_left">
							<text class="txt_l" v-if="">已交押金</text>
							<text class="number_l">0USDT</text>
						</view>
						<view class="z_t_right">
							<text class="txt_l">成交单</text>
							<text class="number_l">{{infoData.count_order}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="timer_txt">资金保障时间：<text class="hour">{{infoData.time_low}}小时</text><text class="iconfont icon-gantanhao"></text> </view>
		</view>
		
		<view class="title_txt"><text class="txt_o">购买信息</text></view>
		<view class="infobox">
			<view class="tab"><u-subsection :list="tabList" :current="current" fontSize="12" inactiveColor="#000" activeColor="#68bf92" bgColor="#efefef" @change='subsectionChange'></u-subsection></view>
			<view class="tabbox" v-if="current == 0">
				<view class="money_input">
					<view class="input">
						<u--input placeholder="输入/选择出售金额" border="bottom" type="digit" v-model="purchaseValue" @change="shortcutChange"></u--input>
					</view>
					<text>限额{{parseInt(infoData.money_low)}}-{{parseInt(infoData.money_high)}}USDT</text>
				</view>
				 <view class="tagbox">
					 <text class=""><u-tag :text="`${infoData.money_low}USDT`" type="warning" @click="shortcut(infoData.money_low)"></u-tag></text>
					 <text class=""><u-tag :text="`${parseFloat(infoData.money_low * 2).toFixed(2)}USDT`"type="success" @click="shortcut(infoData.money_low * 2)"></u-tag></text>
					 <text class=""><u-tag :text="`${parseFloat(infoData.money_low * 3).toFixed(2)}USDT`" type="error" @click="shortcut(infoData.money_low * 3)"></u-tag></text>
				 </view>
			</view>
			<view class="tabbox" v-if="current == 1">
				<view class="money_input">
					<view class="input">
						<u--input placeholder="输入/选择出售人民币" border="bottom" type="digit" v-model="purchaseValue" @change="shortcutChange"></u--input>
					</view>
					<text>限额{{parseInt(infoData.money_low * infoData.usdt_price)}}-{{parseInt(infoData.money_high * infoData.usdt_price)}}元</text>
				</view>
				 <view class="tagbox">
					 <text class=""><u-tag :text="`${infoData.money_low * infoData.usdt_price}元`" type="warning" @click="shortcut(infoData.money_low * infoData.usdt_price)"></u-tag></text>
					 <text class=""><u-tag :text="`${infoData.money_low * infoData.usdt_price * 2}元`" type="success" @click="shortcut(infoData.money_low * infoData.usdt_price * 2)"></u-tag></text>
					 <text class=""><u-tag :text="`${infoData.money_low * infoData.usdt_price * 3}元`" type="error" @click="shortcut(infoData.money_low * infoData.usdt_price * 3)"></u-tag></text>
				 </view>
			</view>
			<view class="text_con">
				<view class="list_txt"><text>已选购买数量</text><text>{{infoData.gouNumber || '0.00'}} USDT</text> </view>
				<view class="list_txt"><text>合约服务费</text><text>{{infoData.server_usdtTxt || '0.00'}} USDT</text></view>
				<view class="list_txt"><text>抢单费</text><text>{{infoData.qiang_usdt || '0'}}USDT</text></view>
				<view class="list_txt"><text>付款总额</text><text>{{infoData.total || '0.00'}} USDT</text></view>
				<view class="list_txt"><text>预估收益</text><text>￥{{infoData.income || '0.00'}}</text></view>
				<view class="list_txt"><text>收款金额</text><text>￥{{infoData.amount || '0.00'}}</text></view>
			</view>
		</view>
	
		<view class="infobox" style="margin-top:20rpx;padding: 10rpx;">
			<view class="input" style="background-color: #f6f6f6;width: auto;border-radius: 5rpx;">
				<u--input placeholder="请输入备注信息" border="bottom" type="digit" v-model="notesValue" @change="change"></u--input>
			</view>
		</view>
		
		
		
		<view class="infobox" style="margin-top:20rpx;padding-bottom:20rpx;">
			<text class="collection">收款方式</text>
			<view class="listcar" v-for="item,inx in thisCarList" :key="inx">
				<view class="caricon">
					<img src="../../static/card_icon.png" alt="" v-if="item.bank_type == 1">
					<img src="../../static/dcep_icon.png" alt="" v-if="item.bank_type == 2">
					<view class="createcoll iconfont icon-xiugai1" @click="modcollection(item)"></view>
				</view>
				<view class="cartxt">
					<view>账户押金<text>{{item.all_money}} USDT</text> </view>
					<view>账户<text>{{item.banknumber}}</text> </view>
					<view>姓名<text>{{item.busername}}</text> </view>
					<view>开户银行<text>{{item.bankname}}</text> </view>
				</view>
				<view class="carcheck" style="margin-top: 30rpx;">
					 <u-radio-group
					    v-model="item.carCheckList"
					    placement="column"
					    @change="carCheckChange(item,inx)"
					  >
					<u-radio shape="circle" activeColor="#5ac725" 
					 :name="item.bid" @change="carCheckChange"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="collection_btn">
				<u-button type="primary" class="btn" icon="plus-circle" iconColor="#68bda0" color="#d4f7eb" text="添加收款方式"  @click="collection"></u-button>
			</view>
		</view>
		
		<view class="collection_btn" style="margin-top: 20rpx;padding-bottom:50rpx;">
			<u-button type="primary" class="btn" iconColor="#68bda0" color="#68bda0" text="立即抢单" @click="ordersClick"></u-button>
		</view>
		
	<botLine />
	
	<u-toast ref="uToast"></u-toast>
	<!-- 密码框 -->
	<u-popup :show="popupShow" :closeable="true" mode="center" round="15" @close="popupClose">
		<view class="passbox">
			<view class="fuk_txt">付款数量(USDT)</view>
			<view class="fuk_img"><img src="../../static/tabbar/u_icon.png" alt="">4.55</view>
			<view class="fuk_pass">请输入密码</view>
			<view><u-code-input v-model="passwordValue" maxlength="6" :dot="true" :focus="true" @finish="poprpFinish"></u-code-input></view>
		</view>
	</u-popup>
	
	</view>
</template>

<script>
	import botLine from '../../components/botLine.vue'
	export default {
		components:{
			botLine
		},
		data() {
			return {
				tabList:['输入USDT','输入人民币'],
				current :0,
				purchaseValue : '',
				notesValue : '',
				infoData:{},
				thisCarList :{},
				carCheckList :'',
				popupShow:false,
				passwordValue:'',
				infoDataObject:{
					bid:'',       //银行卡id
					uid : '',		//用户id
					product_id : '',
					p_usdt : '',  //订单金额
					p_money : '',//订单金额-人民币
					u_money : '', //收益人民币
					p_price : '', //订单单价
					seize_usdt : '', //抢单费
					server_usdt : '', //服务费
					server_bi : '', //服务费百分比
					order_from : '', //抢单来源 
					remark : ''     //备注

				}
			}
		},
		onLoad() {
			console.log('回来了')
			this.infoDataFN(this.$route.query.pid)
			this.infoDataObject.product_id = this.$route.query.pid;
			let cookies = JSON.parse(localStorage.getItem("cookies"))
			this.infoDataObject.uid = cookies&&cookies[0].uid;
			this.cardlistFn(cookies&&cookies[0].uid);
		},
		methods: {
			subsectionChange(v){
				console.log(v)
				this.current = v;
				if(this.current == 0){
					this.conversionFn(this.purchaseValue);
				}else{
					v = this.purchaseValue / this.infoData.usdt_price;
					this.conversionFn(v);
				}
			},
			collection(){
				uni.navigateTo({
				    url:`/pages/collectionway/index?pid=${this.$route.query.pid}&type="info"`
				});
			},
			ordersClick(){
				if(this.thisCarList.length == 0){
					this.$refs.uToast.show({type: 'default',title: '默认主题',message: "请添加收款账户"})
					return
				}else if(this.purchaseValue == ''){
					this.$refs.uToast.show({type: 'default',title: '默认主题',message: "请输入/选择出售金额"})
					return
				}
				this.popupShow = true;
				this.passwordValue = '';
			},
			popupClose(){this.popupShow = false;},
			poprpFinish(v){
				this.popupShow = false;
				console.log(this.infoData)
				console.log(this.infoDataObject)
				uni.request({
					url:'/index/api/add_order',
					method:'post',
					data:this.infoDataObject,
					success:res=>{
						console.log(res)
						this.$refs.uToast.show({type: 'default',title: '默认主题',message: res.data.msg})
					}
				})
			},
			modcollection(v){
				console.log(v.bid)
				uni.navigateTo({
				    url:`/pages/modcollection/index?pid=${this.$route.query.pid}&bid=${v.bid}`
				});
			},
			carCheckChange(v,i){
				console.log(v)
				this.infoDataObject.bid = v;
				this.thisCarList.map((item,inx)=>{
					item.carCheckList = '';
					if(i == inx){
						item.carCheckList = item.bid;
						this.infoDataObject.bid = item.bid;
					}
				})
			},
			// 接口
			// 获取卡片接口
			cardlistFn(uid){
				uni.request({
					url:'/index/api/get_cardlist',
					method:'post',
					data:{uid:uid},
					success:res=>{
						res.data.info.map((item,inx)=>{
							item.carCheckList = '';
							if(inx == 0){
								item.carCheckList = item.bid;
								this.infoDataObject.bid = item.bid;
							}
						})
						this.thisCarList = res.data.info;
					
					}
				})
			},
			// 详情页接口
			infoDataFN(pid){
				uni.request({
					url:'/index/api/product_info',
					method:'post',
					data:{pid:pid},
					success:res=>{
						this.infoData = res.data.info;	
					}
				})
			},
			shortcut(v){
				this.purchaseValue = v;
				if(this.current == 0){
					this.conversionFn(v);
				}else{
					v = v / this.infoData.usdt_price;
					this.conversionFn(v);
				}
				
			},
			shortcutChange(v){
				if(this.current == 0){
					this.conversionFn(v);
				}else{
					v = v / this.infoData.usdt_price;
					this.conversionFn(v);
				}
			},
			conversionFn(v){
				this.infoData.gouNumber = v != '' ? parseFloat(v).toFixed(2) : '0.00';
				this.infoData.server_usdtTxt = v != '' ? this.infoData.gouNumber * this.infoData.server_usdt / 100 : '0.00';
				this.infoData.total = v != '' ? parseInt(this.infoData.gouNumber) + this.infoData.server_usdt / 100 + parseInt(this.infoData.qiang_usdt) : '0.00';
				this.infoData.income = v != '' ? this.infoData.gouNumber * this.infoData.usdt_price * this.infoData.shouyi_usdt / 100 : '0.00';
				this.infoData.amount = v != '' ? this.infoData.gouNumber * this.infoData.usdt_price : '0.00';
			
				this.infoDataObject.p_usdt = this.purchaseValue;
				this.infoDataObject.p_money = this.purchaseValue * this.infoData.usdt_price;
				this.infoDataObject.u_money = this.infoData.income;
				this.infoDataObject.p_price = this.infoData.usdt_price;
				this.infoDataObject.seize_usdt = this.infoData.gouNumber * this.infoData.server_usdt / 100;
				this.infoDataObject.server_usdt = this.infoData.server_usdt / 100;
				this.infoDataObject.server_bi = this.infoData.server_usdt / 100;
				this.infoDataObject.order_from = this.infoData.cname;
				this.infoDataObject.remark = this.notesValue;
				
				sessionStorage.setItem('infoDataObject', JSON.stringify(this.infoDataObject));
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
.content{
	padding:0 20rpx ;background-color: #f1f5f8;
	.title_txt{padding-top:20rpx;padding-bottom:10rpx;
		line-height: 34rpx;height:34rpx;font-size: 12rpx;
		text{padding-left:10rpx;color:#000;font-weight: 500;
			&.txt_b{border-left:#60bc95 solid 2px;}
			&.txt_o{border-left:#ec896c solid 2px;}
		}
	}
	.infobox{
		padding: 0 20rpx;background-color: #fff;
		.timer{
			display: flex;justify-content: space-between;line-height: 78rpx;
			.left_txt{
				color:#969696;font-size: 24rpx;font-weight: 400;
				text{color:#000;font-weight:500;font-size: 28rpx;}
			}
			.time_box{text-align: right;flex: 1;font-size:24rpx;}
		}
		.moneybox{
			display: flex;justify-content: space-between;border-top:#d9d9d9 solid 1px;border-bottom:#d9d9d9 solid 1px;
			.money_d{flex:0.5;font-weight: 600;width:260rpx;
				.danjia{height: 80rpx;line-height: 80rpx;color: #989898;font-size: 26rpx;display: block;}
				.number{
					font-size: 50rpx;color: #000;
					text{font-size: 20rpx;}
				}
				.jingdu{line-height: 40rpx;font-size: 26rpx;color: #989898;}
				.progressbox{
					display: flex;
					.progress{width: 140rpx;padding-top: 19rpx;padding-right:20rpx;}
				}
			}
			.money_z{
				border-left:#d9d9d9 solid 1px;padding-left:10rpx;flex:1;
				.money_z_t{
					display: flex;justify-content: space-between;
					&:nth-child(1){padding-bottom:20rpx;}
					.z_t_left,.z_t_right{
						padding-top:20rpx;
						.txt_l{color: #989898;font-size: 26rpx;font-weight: 600;display: block;}
						.number_l{color: #000;font-size: 24rpx;font-weight: 600;display: block;text-align: left;}
					}
					.z_t_right{text-align: right;}
				}
			}
		}
		.timer_txt{
			color: #989898;font-size: 30rpx;font-weight: 600;line-height: 80rpx;
			.hour{color: #000;padding-right:10rpx;}
			.icon-gantanhao{color: #636268;font-size: 30rpx;}
		}
		.tab{width:380rpx;padding-top:30rpx;}
		.tabbox{
			.money_input{
				display: flex;background-color: #f6f6f6;
				text{flex: 1;
					font-size: 20rpx;text-align: right;padding-right:10rpx;line-height: 76rpx;
				}
			}
			.tagbox{margin-top:20rpx;padding-bottom:40rpx;border-bottom:2rpx #dadada solid;
				text{display: inline-block;margin-right:20rpx;}
			}
		}
		.input{width:380rpx;padding-left:10rpx;
			.u-border-bottom{border:none;}
		}
		.text_con{
			padding: 20rpx 0 ;
			.list_txt{
				display: flex;line-height: 50rpx;color: #000;font-size: 400;font-size: 30rpx;
				text{color: #919191;padding-right: 20rpx;font-size: 18rpx;flex: 1;font-weight: 600;
					&:nth-child(1){color: #989898;}
					&:nth-child(2){text-align: right;color: #000;font-size: 20rpx;}
				}
				
			}
		}
		.collection{
			height: 76rpx;line-height: 76rpx;font-size: 24rpx;color: #000;font-weight: 500;padding-left: 10rpx;
		}
		.collection_btn{
			.btn{
				/deep/.u-button__text span{color:#58bc9a;}
			}	
		}
		.listcar{
			display: flex;border-top: #f7f7f7 solid 1px;padding: 20rpx 0;
			.caricon{
				padding-left: 20rpx;padding-right: 30rpx;position: relative;padding-top: 10rpx;
				img{
					width: 44rpx;height: 44rpx;
				}
				.createcoll{
					position: absolute;bottom: 20rpx;
				}
			}
			.cartxt{flex: 1;
				font-size: 26rpx;line-height: 50rpx;
				text{
					color: #989898;padding-left: 10rpx;
				}
			}
			
		}
		
		
	}
	.passbox{padding: 30rpx 20rpx 50rpx 20rpx;}
		.fuk_txt{
			text-align: center;font-size: 26rpx;color: #9a9a9a;
		}
		.fuk_img{
			display: flex;justify-content: center;align-items: center;
			font-size: 40rpx;padding: 20rpx;
			img{
				width: 54rpx;height: 54rpx;
			}
		}
		.fuk_pass{
			font-size: 24rpx;line-height: 30rpx;color:#fa845c;text-align: center;padding-bottom: 20rpx;
		}
	
	
}
</style>